<template>
	<div class="mainContent">
		<div class="fun_area">
			<el-form label-width="80px">
				<el-form-item style="margin-bottom: 0;" label="商户ID" v-if="tabFlag=='快卖列表'">
					<el-input v-model="danpin_listForm.shanghuid"></el-input>
				</el-form-item>
			</el-form>
			<div class="">
				<el-button style="margin-left: 10px ;" @click="reloadList()">重置</el-button>
				<el-button type="primary" @click="goSearch">查询</el-button>
			</div>
		</div>
		<el-tabs type="border-card" @tab-click="tabClick">
			<el-tab-pane label="快卖列表">
				<el-table v-loading="loading" v-if="danpinListData.length>0" :data="danpinListData" style="width: 100%"
					height="650" border>
					<el-table-column prop="name" label="单品名称" align="center">
					</el-table-column>
					<el-table-column prop="title" label="单品标题" align="center">
					</el-table-column>
					<el-table-column prop="content" label="介绍" align="center">
					</el-table-column>
					<el-table-column prop="original" label="原价" width="80" align="center">
					</el-table-column>
					<el-table-column prop="price" label="现价" width="80" align="center">
					</el-table-column>
					<el-table-column prop="shanghu" label="商户" align="center">
					</el-table-column>
					<el-table-column prop="shanghuid" label="商户ID" align="center">
					</el-table-column>
					<el-table-column label="图片" align="center">
						<template slot-scope="scope">
							<div class="">
								<el-image :key="index" v-for="(item, index) in scope.row.images"
									style="width: 70px; height: 70px" :src="item" fit="contain"></el-image>
							</div>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="120" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="small" @click="buyRecord(scope.row.id)">
								购买记录
							</el-button>
							<el-button type="warning" size="small" @click="scanRecord(scope.row.id)">
								浏览记录
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-empty v-else description="暂无记录"></el-empty>
			</el-tab-pane>

		</el-tabs>
		<div class="pageFooter">
			<el-pagination @current-change="changecurrentPage" :current-page="pageNo" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="pageTotal">
			</el-pagination>
		</div>
		<!-- 购买记录 -->
		<el-dialog title="购买记录" :visible.sync="buyDia">
			<el-table v-loading="loading" v-if="danpinorderData.length>0" :data="danpinorderData" style="width: 100%"
				height="650" border>
				<el-table-column prop="uid" label="用户ID" align="center">
				</el-table-column>
				<el-table-column prop="nickname" label="用户昵称" align="center">
				</el-table-column>
				<el-table-column prop="phone" label="手机号" align="center">
				</el-table-column>

			</el-table>
			<el-empty v-else description="暂无记录"></el-empty>
			<div class="pageFooter">
				<el-pagination @current-change="changecurrentPage" :current-page="pageNo" :page-size="pageSize"
					layout="total, prev, pager, next, jumper" :total="pageTotal">
				</el-pagination>
			</div>
		</el-dialog>


		<el-dialog title="浏览记录" :visible.sync="scanDia">
			<el-table v-loading="loading" v-if="danpinseenumData.length>0" :data="danpinseenumData" style="width: 100%"
				height="650" border>
				<el-table-column prop="uid" label="用户ID" align="center">
				</el-table-column>
				<el-table-column prop="nickname" label="用户昵称" align="center">
				</el-table-column>
				<el-table-column prop="phone" label="手机号" align="center">
				</el-table-column>
			</el-table>
			<el-empty v-else description="暂无记录"></el-empty>
			<div class="pageFooter">
				<el-pagination @current-change="changecurrentPage" :current-page="pageNo" :page-size="pageSize"
					layout="total, prev, pager, next, jumper" :total="pageTotal">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// recommend
	import {
		danpinlist,
		danpinseenum,
		danpinorder
	} from "@/api/quickSale";
	// import add from "./modules/add";
	export default {
		name: "Dashboard",
		// components: {
		// 	add,
		// },
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				danpinListData: [],
				danpinseenumData: [],
				danpinorderData: [],
				danpin_listForm: {
					shanghuid: ''
				},
				danpinseenumForm: {
					id: ''
				},
				danpinorderForm: {
					id: ''
				},
				tabFlag: '快卖列表',
				pageTotal: '',
				loading: true,
				buyDia: false,
				scanDia: false
			}
		},
		mounted() {
			this.danpinlist()
		},
		methods: {
			buyRecord(val) {

				this.danpinorder(val)

			},
			scanRecord(val) {
				this.danpinseenum(val)

			},
			// 单品列表
			async danpinlist() {
				let result = await danpinlist({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					shanghuid: parseInt(this.danpin_listForm.shanghuid)
				});

				if (result.code == 0) {

					this.danpinListData = result.data.data;

					this.danpinListData = result.data.data;
					this.pageTotal = result.data.totalCount;
					this.danpinListData.forEach((item, index) => {
						// console.log(item.images.split(','));
						if (item.image != "") {
							this.$set(item, "images", item.image.split(","));
						}
					});
					this.loading = false;


				}
			},
			// 浏览记录
			async danpinseenum(id) {
				let result = await danpinseenum({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					id: id
				});
				if (result.code == 0) {
					this.danpinseenumData = result.data.data;
					this.pageTotal = result.data.totalCount;

				}
				this.scanDia = true;
			},
			// 购买记录
			async danpinorder(id) {
				let result = await danpinorder({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					id: id
				});
				if (result.code == 0) {
					this.danpinorderData = result.data.data;
					this.pageTotal = result.data.totalCount;
				}
				this.buyDia = true;
			},
			tabClick(tab, event) {
				this.pageNo = 1;
				this.pageSize = 10;
				this.tabFlag = tab.label;
				this.loading = true;
				if (this.tabFlag == '快卖列表') {
					this.danpinlist();
				} else if (this.tabFlag == '购买记录') {
					this.danpinorder();
				} else if (this.tabFlag == '浏览记录') {
					this.danpinseenum();
				}
			},
			changecurrentPage(val) {
				this.pageNo = val;
				this.loading = true;
				if (this.tabFlag == '快卖列表') {
					this.danpinlist();
				} else if (this.tabFlag == '购买记录') {
					this.danpinorder();
				} else if (this.tabFlag == '浏览记录') {
					this.danpinseenum();
				}
			},

			// 搜索按钮点击方法
			goSearch() {
				if (this.tabFlag == '快卖列表') {
					if (this.danpin_listForm.shanghuid == '') {
						this.$message({
							message: '请输入id进行搜索',
							type: "warning"
						})
						return
					}
					this.danpinlist();
				} else if (this.tabFlag == '购买记录') {
					if (this.danpinorderForm.id == '') {
						this.$message({
							message: '请输入id进行搜索',
							type: "warning"
						})
						return
					}
					this.danpinorder();
				} else if (this.tabFlag == '浏览记录') {
					if (this.danpinseenumForm.id == '') {
						this.$message({
							message: '请输入id进行搜索',
							type: "warning"
						})
						return
					}
					this.danpinseenum();
				}
			},
			reloadList() {
				this.danpin_listForm.shanghuid = '';
				this.pageNo = 1;
				this.pageSize = 10;
				this.danpinlist();
			}
		},
	}
</script>

<style>
	.fun_area {
		padding: 20px;
		margin-bottom: 20px;
		background-color: #fff;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		filter: drop-shadow(2px 2px 3px #e5e5e5);
		display: flex;
	}

	.pageFooter {
		background: #fff;
		width: 100%;
		text-align: center;
		padding-top: 20px;
	}
</style>